<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container1 {
            display: grid;
            grid-template-columns: auto auto auto auto;
            grid-gap: 10px;
            background-color: #2196F3;
            padding: 10px;
        }
        .container2 {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            grid-gap: 10px;
            background-color: #2196F3;
            padding: 10px;
        }
        .container3 {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            grid-gap: 10px;
            background-color: #2196F3;
            padding: 10px;
        }
        div.container3 > div.item2 {
            grid-column: 2 / span 3;
        }
        .container4 {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 10px;
            background-color: #2196F3;
            padding: 10px;
        }
        div.container4 > div.item4 {
            grid-row: 2 / span 3;
            grid-column: 2 / span 2;
        }
        div {
            background-color: #EEFFFC;
            border: 1px solid black;
            text-align: center;
            font-size: 30px;
        }
    </style>
</head>
<body>
<div class="container1">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>
<hr>
<div class="container2">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>
<hr>
<div class="container3">
    <div>1</div>
    <div class="item2">2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div class="item2">9</div>
</div>
<hr>
<div class="container4">
    <div>1</div>
    <div  class="item4">2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div >9</div>
</div>
<hr>
</body>
</html>